<template>
  <div class="userInfo">
    <!-- 导航 -->
    <MMNavBar @onClickLeft="backToMy" title="我的资料"></MMNavBar>
    <!-- 主体区域 -->
    <div class="main-box">
      <MMCell
        class="avatar"
        title="头像"
        value="头"
        @click="$router.push('/editInfo?prop=avatar')"
      >
        <!-- 默认插槽 直接 template即可 不用写#名字 -->
        <template>
          <img :src="userInfo.avatar" alt="" />
        </template>
      </MMCell>
      <van-cell-group>
        <MMCell
          title="昵称"
          :value="userInfo.nickname"
          @click="$router.push('/editInfo?prop=nickname')"
        ></MMCell>
        <MMCell
          title="性别"
          :value="userGender"
          @click="showGenderPicker = true"
        ></MMCell>
        <MMCell
          title="地区"
          :value="userArea"
          @click="showAreaPicker = true"
        ></MMCell>

        <MMCell
          title="个人简介"
          :value="userInfo.intro"
          @click="$router.push('/editInfo?prop=intro')"
        ></MMCell>
      </van-cell-group>
      <!-- 返回按钮 -->
      <van-button type="default" size="large" @click="logout"
        >退出登录</van-button
      >
    </div>

    <!-- 性别弹出层 -->
    <van-popup
      v-model="showGenderPicker"
      round
      position="bottom"
      @closed="onGenderPickerCancel"
    >
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="onGenderPickerCancel"
        @confirm="onGenderPickerConfirm"
        :default-index="userInfo.gender"
        ref="genderPicker"
      />
    </van-popup>

    <!-- 省市区弹出层 -->
    <van-popup
      v-model="showAreaPicker"
      position="bottom"
      @closed="onAreaCancel"
    >
      <van-area
        title="标题"
        :value="userInfo.area"
        :area-list="areaData"
        :columns-num="2"
        @confirm="onAreaConfirm"
        @cancel="onAreaCancel"
        ref="area"
      />
    </van-popup>
  </div>
</template>

<script>
// 辅助函数
import { mapState, mapGetters, mapMutations } from 'vuex'
// 导入token辅助函数
import { removeToken } from '../../utils/local.js'
// 导入接口
import { editUserInfo } from '../../api/user'
// 导入省市区数据
import areaData from '../../utils/area.js'
export default {
  name: 'userInfo',
  data () {
    return {
      // 是否显示 性别选择器
      showGenderPicker: false,
      // 性别数据
      columns: ['未知', '男孩子', '女孩子'],
      // 是否显示省市区 选择器
      showAreaPicker: false,
      // 省市区数据
      areaData
    }
  },
  computed: {
    // 合并getters
    ...mapGetters(['userGender', 'userArea']),
    // 合并state
    ...mapState(['userInfo'])
  },
  methods: {
    // 合并Mutations 到方法中
    ...mapMutations(['SETUSERINFO', 'SETISLOGIN', 'SETPROPVALUE']),
    // 省市区选择器 确认
    onAreaConfirm (data) {
      // console.log(data)
      /*
      [
         {code: "310000", name: "上海市"},
         {code: "310100", name: "上海市"}
      ]
      */
      // 获取市的编码
      // loading
      this.$toast.loading({ duration: 0 })
      // 修改数据
      editUserInfo({ area: data[1].code }).then(res => {
        this.$toast.success('修改成功')
        // console.log(res)
        // 关闭picker
        this.showAreaPicker = false
        // 同步修改 vuex中的指定属性
        this.SETPROPVALUE({
          // 属性名
          propName: 'area',
          // 属性值
          propValue: data[1].code
        })
      })
    },
    // 省市区选择器 取消
    onAreaCancel () {
      console.log('onAreaCancel')
      // 关闭 选择器
      this.showAreaPicker = false
      // 重置数据 传入城市编码 字符串
      this.$refs.area.reset(this.userInfo.area)
    },
    // 性别选择器点击确认
    onGenderPickerConfirm (value, index) {
      console.log(value)
      console.log(index)
      // loading
      this.$toast.loading({ duration: 0 })
      // 修改数据
      editUserInfo({ gender: index }).then(res => {
        this.$toast.success('修改成功')
        // console.log(res)
        // 关闭picker
        this.showGenderPicker = false
        // 同步修改 vuex中的指定属性
        this.SETPROPVALUE({
          // 属性名
          propName: 'gender',
          // 属性值
          propValue: index
        })
      })
    },
    // 关闭性别选择器
    onGenderPickerCancel () {
      // 重置 为用户的原始性别索引
      // 参数1: 0 表示第一列 列是竖着的
      // 参数2: 设置的索引值
      this.$refs.genderPicker.setColumnIndex(0, this.userInfo.gender)
      // 关闭
      this.showGenderPicker = false
    },
    backToMy () {
      this.$router.push('/my')
    },
    // 退出
    logout () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '确定要退出o(╥﹏╥)o'
        })
        .then(() => {
          // on confirm
          // 删除token
          removeToken()
          // 删除用户信息
          this.SETUSERINFO('')
          // 登录状态变为false
          this.SETISLOGIN(false)
          // 去发现页
          this.$router.push('/find')
        })
        .catch(() => {
          // on cancel
          console.log('木有走!!')
        })
    }
  }
}
</script>

<style lang="less">
.userInfo {
  .main-box {
    padding: 15px;
    .avatar {
      margin-bottom: 10px;
      border-radius: 8px;
      img {
        margin-top: 10px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
    .van-cell-group {
      margin-bottom: 15px;
      border-radius: 8px;
      overflow: hidden;
    }
    .van-button__text {
      color: @main-color;
    }
  }
}
</style>
